<%--
  Created by IntelliJ IDEA.
  User: 臻嫣
  Date: 2023/4/19
  Time: 21:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .container {
            padding: 16px;
        }

        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }
    </style>
</head>
<body>
<button onclick="openLoginForm()">登录</button>
<div id="loginForm" class="modal">
    <form class="modal-content" action="/login" method="post">
        <div class="container">
            <label for="username"><b>用户名</b></label>
            <input type="text" placeholder="输入用户名" name="username" required>

            <label for="password"><b>密码</b></label>
            <input type="password" placeholder="输入密码" name="password" required>

            <button type="submit">登录</button>
            <label>
                <input type="checkbox" checked="checked" name="remember"> 记住我
            </label>
        </div>

        <div class="container" style="background-color:#f1f1f1">
            <button type="button" onclick="closeLoginForm()" class="cancelbtn">取消</button>
            <span class="psw">忘记<a href="#">密码？</a></span>
        </div>
    </form>
</div>

<script>
    function openLoginForm() {
        document.getElementById("loginForm").style.display = "block";
    }

    function closeLoginForm() {
        document.getElementById("loginForm").style.display = "none";
    }
</script>
</body>
</html>
